<html>

<head>
    <meta charset="utf-8">
    <title>好玩的时钟</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        html{background:#000;color:#666;font-size:12px;overflow:hidden}*{margin:0;padding:0}span{display:block;float:left}.on{color:#fff}.wrapper{width:4px;height:200px;position:absolute;left:50%;top:50%;margin-top:-100px;margin-left:-100px}.wrapper .timebox{position:absolute;width:200px;height:200px;top:0;left:0;border-radius:100%;transition:all 0.5s}.timebox span{transition:all 0.5s;float:left}.wrapper .timebox span{position:absolute;left:50%;top:50%;width:40px;height:18px;margin-top:-9px;margin-left:-20px;text-align:right}
    </style>
</head>

<body>

<div id="wrapper">
    <div class="timebox monthbox" id="monthBox"></div>
    <div class="timebox dateBox" id="dateBox"></div>
    <div class="timebox hourbox" id="hourbox"></div>
    <div class="timebox minutebox" id="minutebox"></div>
    <div class="timebox secondbox" id="secondbox"></div>
</div>

</body>

<script>
    let wrapper=document.getElementById("wrapper");let monthBox=document.getElementById("monthBox");let dateBox=document.getElementById("dateBox");let hourbox=document.getElementById("hourbox");let minutebox=document.getElementById("minutebox");let secondbox=document.getElementById("secondbox");let findSiblings=(tag)=>{let parent=tag.parentNode;let childs=parent.children;let sb=[];for(let i=0;i<=childs.length-1;i++){if(childs[i]!==tag){sb[sb.length]=childs[i]}};return sb};let removeSiblingClass=(tag)=>{let sb=findSiblings(tag);for(let i=0;i<=sb.length-1;i++){sb[i].className=""}};let initMonth=()=>{for(let i=1;i<=12;i++){let span=document.createElement("span");span.innerHTML=i+"月";monthBox.appendChild(span)}};let initDate=()=>{for(let i=1;i<=31;i++){let span=document.createElement("span");span.innerHTML=i+"日";dateBox.appendChild(span)}};let initHour=()=>{for(let i=0;i<=23;i++){let h=i;let span=document.createElement("span");if(h<10){h="0"+h}span.innerHTML=h+"点";hourbox.appendChild(span)}};let initMinute=()=>{for(let i=0;i<=59;i++){let f=i;let span=document.createElement("span");if(f<10){f="0"+f}span.innerHTML=f+"分";minutebox.appendChild(span)}};let initSecond=()=>{for(let i=0;i<=59;i++){let miao=i;let span=document.createElement("span");if(miao<10){miao="0"+miao}span.innerHTML=miao+"秒";secondbox.appendChild(span)}};let changeTime=(tag)=>{tag.className="on";removeSiblingClass(tag)};let initRili=()=>{initMonth();initDate();initHour();initMinute();initSecond()};let showNow=(mydate)=>{let month=mydate.getMonth();let date=mydate.getDate();let hour=mydate.getHours();let minute=mydate.getMinutes();let second=mydate.getSeconds();changeTime(monthBox.children[month]);changeTime(dateBox.children[date-1]);changeTime(hourbox.children[hour]);changeTime(minutebox.children[minute]);changeTime(secondbox.children[second])};let textRound=(tag,num,dis)=>{let span=tag.children;for(let i=0;i<=span.length-1;i++){span[i].style.transform="rotate("+(360/span.length)*i+"deg)  translateX("+dis+"px)"}};let rotateTag=(tag,deg)=>{tag.style.transform="rotate("+deg+"deg)"};let timeRun=()=>{initRili();setInterval(()=>{let mydate=new Date();showNow(mydate)},1000);setTimeout(()=>{wrapper.className="wrapper";textRound(monthBox,12,40);textRound(dateBox,31,80);textRound(hourbox,24,120);textRound(minutebox,60,160);textRound(secondbox,60,200);setInterval(()=>{let mydate=new Date();rotateTag(monthBox,-30*mydate.getMonth());rotateTag(dateBox,-360/31*(mydate.getDate()-1));rotateTag(hourbox,-360/24*mydate.getHours());rotateTag(minutebox,-6*mydate.getMinutes());rotateTag(secondbox,-6*mydate.getSeconds())},1000)},0)};timeRun();
</script>

</html>
